<template>
    <div>
        <el-form ref="userRef" :inline="true" :model="formInline" class="demo-form-inline" size="medium" clearable>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="用户ID" prop="userId">
                        <el-input v-model="formInline.userId" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="昵称" prop="userName">
                        <el-input v-model="formInline.userName" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="手机号" prop="cellPhone">
                        <el-input v-model="formInline.cellPhone" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="info" @click="onSubmit">查询</el-button>
                        <el-button type="info" @click="resetting">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData">
            <el-table-column prop="userID" label="用户ID">
            </el-table-column>
            <el-table-column prop="userName" label="昵称">
            </el-table-column>
            <el-table-column prop="cellPhone" label="手机号">
            </el-table-column>
            <el-table-column prop="identityPermissions" label="身份权限">
            </el-table-column>
            <el-table-column prop="isEnabled" label="状态">
            </el-table-column>
            <el-table-column prop="creationTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small">禁用</el-button>
                    <el-button type="text" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.showApage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageNum"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 分页
            pagination: {
                // 显示第几页
                showApage: 1,
                // 总条数
                total: 50,
                // 每页显示多少条
                pageNum: 10,
            },
            formInline: {
                // 用户ID
                userId: '',
                // 昵称
                userName: '',
                // 手机号
                cellPhone: ''
            },
            tableData: [{
                // 用户ID
                userID: '123',
                // 昵称
                userName: '小章',
                // 手机号
                cellPhone: '13578459658',
                // 身份权限
                identityPermissions: '普通管理员',
                // 状态
                isEnabled: '启用',
                // 创建时间
                creationTime: '2017-10-31 23:12:00',

            }, {
                userID: '123',
                userName: '小章',
                cellPhone: '13578459658',
                identityPermissions: '超级管理员',
                isEnabled: '启用',
                creationTime: '2017-10-31 23:12:00',

            }, {
                userID: '123',
                userName: '小章',
                cellPhone: '13578459658',
                identityPermissions: '空间管理员',
                isEnabled: '启用',
                creationTime: '2017-10-31 23:12:00',

            }, {
                userID: '123',
                userName: '小章',
                cellPhone: '13578459658',
                identityPermissions: '空间管理员',
                isEnabled: '启用',
                creationTime: '2017-10-31 23:12:00',

            }]
        }
    },
    methods: {
        // 查询
        onSubmit() {
            console.log(this.formInline, 'submit!');
        },
        // 重置
        resetting() {
            this.$refs.userRef.resetFields()
        },
        // 每页条数
        handleSizeChange(e) {
            this.pagination.pageNum = e
            // 重新掉一下数据
        },
        // 当前第几页
        handleCurrentChange(val) {
            this.pagination.showApage = val
            // 重新掉一下数据
        },
    }

}
</script>

<style lang="less" scoped></style>